<script setup>
import { computed, ref, watch } from 'vue'
import { storeToRefs } from 'pinia';
import {onMounted} from 'vue'
import usePersonList from '@/store/personList'

const personList = usePersonList()
const { list } = storeToRefs(personList)

onMounted(()=>{
    personList.loadData()
})

</script>
<template>
    <nav class="title">个人通讯录</nav>
   <el-table :data="list" border="true" style="width: 80%;margin-left: 10%;">
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="tele" label="电话" width="180"> </el-table-column>
    <el-table-column align="right">
      <template #header>
        <input type="text" placeholder="姓名">
        <input type="text" placeholder="电话">
        <el-button plain>新增+  </el-button>
        <el-input size="mini" clearable placeholder="输入关键字搜索" />
      </template>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
      </template>
    </el-table-column>
</el-table>
<el-backtop :right="100" :bottom="100" />
</template>

<style lang='stylus'>
el-table
    font-size:20px;
.title
    font-size 40px
    font-family KaiTi
    display flex
    justify-content center
    text-align center
    margin-bottom: 1.5rem
</style>